<template>
  <header class="header">
    <div class="logo-container">
      <!--      <img class="logo" src="https://via.placeholder.com/150x50/007AFF/FFFFFF?text=慧家" alt="慧家logo">-->
    </div>
    <nav class="nav">
      <div class="search-bar-container">
        <select v-model="searchForm.communityId" class="search-bar">
          <!-- 动态渲染的选项 -->
          <option
              v-for="item in ComListOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          ></option>
        </select>
        <button class="search-button" @click="searchCity">租房</button>
      </div>
      <div class="app-download">
<!--        <span class="app-download-text">扫码联系管理员</span>-->
<!--        <img class="qr-code" :src=erweima alt="二维码">-->
      </div>
    </nav>
  </header>
  <main class="main">
    <div class="hot-cities">
      <h2 class="section-title">热门小区</h2>
      <div class="city-list">
        <a v-for="city in hotCities" :key="city.name"  class="city-item">
          <!-- 传递当前 city 对象给 searchCityRow 方法 -->
          <img :src="city.image" alt="city.name" class="city-image" @click="searchCityRow(city)">
          <div class="city-info">
            <span class="city-name">{{ city.name }}</span>
          </div>
        </a>
      </div>
      <a @click="searchCityAll" class="view-all">查看全部租房信息</a>
    </div>
  </main>
</template>

<script setup>
import { ref } from 'vue';
import prcone from '@/assets/imgs/1.jpg'
import prctwo from '@/assets/imgs/2.jpg'
import prcthree from '@/assets/imgs/3.jpg'
import prcfour from '@/assets/imgs/4.jpg'
import prcfive from '@/assets/imgs/5.jpg'
import prcsix from '@/assets/imgs/6.jpg'
import seven from '@/assets/imgs/7.jpg'
import enigt from '@/assets/imgs/8.jpg'
import erweima from '@/assets/erweima.jpg'
import {ElMessage} from "element-plus";
import {getCommunityList} from "@/api/community.js";
import { useRouter } from 'vue-router'
const ComListOptions = ref([])
// 获取其他下拉选项数据
const fetchDropdownOptions = async () => {
  try {
    const resCom = await getCommunityList()
    ComListOptions.value = resCom.res.map(item => ({
      value: item.id,
      label: item.name
    }))
  } catch (error) {
    console.error('获取失败:', error)
    ElMessage.error('加载失败')
  }
}

fetchDropdownOptions()

// 模拟热门城市数据
const hotCities = ref([
  {
    name: '联华壹号',
    communityId:'5',
    image: prcone
  },
  {
    name: '凯丽花园',
    communityId:'2',
    image: prctwo
  },
  {
    name: '三堂回迁',
    communityId:'4',
    image: prcthree
  },
  {
    name: '铭岛仕佳',
    communityId:'1',
    image: prcfour
  },
  {
    name: '翠岛经典',
    communityId:'6',
    image: prcfive
  },
  {
    name: '和美华庭',
    communityId:'3',
    image: prcsix
  },
  {
    name: '尚海花园',
    communityId:'7',
    image: seven
  },
  {
    name: '怡海花园',
    communityId:'8',
    image: enigt
  }
]);

const activeTab = ref('domestic');
const searchKeyword = ref('');

const searchForm = ref({
  communityId: ' '
})

// 处理查看操作
const router = useRouter()
const searchCity = () => {
  router.push({
    name: 'RentingHouseslistadm',
    params: { communityId: searchForm.value.communityId},
  })
}
const searchCityRow = (row) => {
  router.push({
    name: 'RentingHouseslistadm',
    params: { communityId: row.communityId},
  })
}
const searchCityAll = () => {
  router.push({
    path: '/RentingHouses/RentingHouseslist',
    params: { },
  })
}
</script>

<style scoped>
/* 通用样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

/* 头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo-container {
  flex: 1;
}

.logo {
  max-width: 100%;
  height: auto;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 3;
}

.search-bar-container {
  display: flex;
  align-items: center;
}

.search-bar {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  width: 300px;
  font-size: 14px;
  background-color: #fff;
  color: #333;
}

.search-button {
  padding: 10px 20px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 14px;
  margin-left: 2px;
  transition: background-color 0.3s ease;
}

.search-button:hover {
  background-color: #096dd9;
}

.app-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 20px;
}

.app-download-text {
  font-size: 14px;
  margin-bottom: 5px;
  color: #333;
}

.qr-code {
  width: 120px;
  height: 120px;
}

/* 主体样式 */
.main {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.hot-cities {
  margin-bottom: 40px;
}

.section-title {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.city-list {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 30px;
}

.city-item {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.city-item:hover {
  transform: translateY(-5px);
}

.city-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
}

.city-info {
  padding: 15px 0;
  text-align: center;
}

.city-name {
  font-size: 18px;
  margin-bottom: 5px;
  color: #333;
}

.view-all {
  display: block;
  text-align: right;
  margin-top: 20px;
  color: #1890ff;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.view-all:hover {
  color: #096dd9;
  text-decoration: underline;
}
</style>
